<template>
	<view class="wrap">
		<view class="wrap-list">
			<view class="wrap-list-info">
				<view class="wrap-list-info-content align-center">
					<view class="wrap-list-info-content-atv">
						<up-image src="/static/images/agreeBg.png" :fade="false" width="120rpx" height="120rpx" radius="12rpx"></up-image>
					</view>
					<view class="wrap-list-info-content-name">
						<view class="wrap-list-info-title">
							昵称
						</view>
						<view class="wrap-list-info-content-name-name">
							聂小倩
						</view>
					</view>
				</view>
			</view>
			<view class="wrap-list-appointment">
				<view class="wrap-list-appointment-time align-justify-space-between">
					预约时间
					<view class="">
						4月15日—10:00:00
					</view>
				</view>
				<view class="wrap-list-appointment-address align-justify-space-between">
					预约时间
					<view class="">
						天津市河西区天河城天津市河西区天河城天津市河西区天河城
					</view>
				</view>
			</view>
			<view class="wrap-list-needAccompany">
				需要管家陪同
			</view>
			<view class="wrap-list-btn align-justify-space-between">
				<view class="wrap-list-btn-item">
					不同意
				</view>
				<view class="wrap-list-btn-item active">
					同意
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useUserStore
	} from '@/store'
	import {
		computed,
		getCurrentInstance
	} from "vue"

	
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 30rpx;
		box-sizing: border-box;
		
		&-list{
			padding: 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			&-info{
				height: 160rpx;
				border-bottom: 2rpx solid #DEDEDE;
				&-content{
					&-name{
						margin-left: 16rpx;
						&-title{
							margin-bottom: 20rpx;
							font-size: 30rpx;
							color: #444444;
						}
						&-name{
							font-weight: bold;
							font-size: 34rpx;
							color: #222222;
						}
					}
				}
			}
			&-appointment{
				height: 362rpx;
				padding: 70rpx 0;
				box-sizing: border-box;
				border-bottom: 2rpx solid #DEDEDE;
				& > view{
					align-items: flex-start;
					font-size: 30rpx;
					color: #444444;
					&:first-child{
						margin-bottom: 60rpx;
					}
					& > view{
						width: 350rpx;
						font-size: 30rpx;
						color: #222222;
					}
				}
			}
			&-needAccompany{
				margin: 20rpx 0 60rpx;
				font-size: 26rpx;
				color: #FF47AB;
			}
			&-btn{
				&-item{
					width: 284rpx;
					height: 62rpx;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					border: 2rpx solid #FF47AB;
					box-sizing: border-box;
					font-size: 30rpx;
					color: #FF47AB;
					line-height: 62rpx;
					text-align: center;
					background-color: #FFE9F5;
					&.active{
						background-color: #FF47AB;
						border-color: transparent;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>